<template>
	<div style='height:100%;position:relative;'>
		<div :style='{height: height + "px"}' ref='payTypeRate'></div>
		<div class='m-t-30' :style='legendStyle'>
			<ul id='pay-type-rate-sm'>
				<li>线上支付：{{data[0]}}元</li>
				<li>刷卡：{{data[1]}}元</li>
				<li>投币：{{data[2]}}元</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	let chartPayTypeRate = null
	export default {
		props : {
			data : {
				type : Array,
				default : [0, 0, 0]
			},
			height : {
				type : Number,
				default : 200
			},
			
			legendStyle : {
				type : Object,
				default : {}
			}
		},
		
		data() {
			return {
		
			}
		},
		
		methods : {
			draw : function(){
				let chartPayTypeRateOption = {
					legend: {
						show : false
					},
					color : ['#6e9cfe', '#a9a9a9', '#d5d5d5'],
					series : [
						{
							type: 'pie',
							radius : '80%',
							center: ['50%', '50%'],
							label : {
								show : true,
								position : 'inner',
								formatter : '{d}%'
							},
							data:[
								{value : this.data[0], name:'线上支付'},
								{value : this.data[1], name:'刷卡'},
								{value : this.data[2], name:'投币'}
							],
							
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				}
				
				chartPayTypeRate.setOption(chartPayTypeRateOption, true)
			}
		},
		
		watch : {
			data : function(){
				this.draw()
			}
		},
		
		mounted () {
			
			chartPayTypeRate = echarts.init(this.$refs.payTypeRate)
			this.draw()
		}
		
	}
</script>

<style lang='less' scoped>
#pay-type-rate-sm{
	padding-left:20px;
	line-height:25px;
	li{
		position:relative;
		padding-left:20px;
		&:before{
			content:'';
			position:absolute;
			height:4px;
			width:8px;
			background:#6e9cfe;
			left:0;
			top:50%;
			margin-top:-2px;
		}
		
		&:nth-of-type(2){
			&:before{
				background:#a9a9a9;
			}
		}
		
		&:nth-of-type(3){
			&:before{
				background:#d5d5d5;
			}
		}
	}
	
}
</style>
